<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>品牌信息</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <style>


        body {

            margin: 0 auto;
            font-size: 16px;
        }

        .formDiv {

            margin: auto;

            width: 500px;
            height: 300px;
        }

        .formDiv li {

            list-style: none;
            line-height: 30px;
        }


    </style>
</head>


<body>

<div class="formDiv" id="app">

    <h2>品牌信息</h2>


    <input id="brandId" type="hidden">
    <li><span>品牌名称</span> <input type="text" id="brandName" name="brandName" v-model="brandFormData.brandName" ></li>
    <li><span>企业名称</span> <input type="text" id="companyName" name="companyName"  v-model="brandFormData.companyName"></li>
    <li><span>排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序</span>
        <input type="text" name="ordered" id="ordered"  v-model="brandFormData.ordered"></li>
    <li><span>品牌介绍</span><br>
        <textarea rows="10" cols="50" id="description" name="description" v-model="brandFormData.description"></textarea></li>

    <li><span>状态</span>
        <input type="radio" name="status" value="0" v-model="brandFormData.status">禁用
        <input type="radio" name="status" value="1" checked v-model="brandFormData.status">启用
    </li>


    <li>
        <input type="submit" v-on:click="subMitData()" value="提交">
        <input type="reset" value="重置">
    </li>


</div>
</body>
</html>
<script>

    new Vue({

        el: '#app',

        data: {
            brandFormData: {
                id: '',
                brandName: '',
                companyName: '',
                ordered: 0,
                description: '',
                status: 1
            } //变量
        },
        methods: {

            handlQuery(id) {

                // 发送查询
                axios({url: '/brand-case/BrandGetServlet?id=' + id, method: 'GET'}).then((resp) => {

                    this.brandFormData = resp.data
                   //表单回显
                    document.getElementById('brandName').value = this.brandFormData.brandName;
                    document.getElementById('companyName').value=this.brandFormData.companyName;
                    document.getElementById('ordered').value=this.brandFormData.ordered;
                    document.getElementById('description').value=this.brandFormData.description;
                    document.getElementById('brandId').value=this.brandFormData.id;
                    let statuss = document.getElementsByName("status");

                    for (let i = 0; i < statuss.length; i++) {
                        if (statuss[i].value==this.brandFormData.status) {
                            statuss[i].checked = true
                        }
                    }

                })
            },

            subMitData()
            {
                //第一步 绑定
                axios({url: '/brand-case/BrandAddOrUpdateServlet', method: 'POST', data: this.brandFormData}).then(
                    (resp)=>{


                        if(resp.data == "OK")

                        {



                            window.location.href='brand.html'
                        }else{


                            alert("操作失败!!!")
                        }
                    }
                )
            }
        },
        mounted() {
            const queryParams = new URLSearchParams(window.location.search);
            const id = queryParams.get('id');

            if (id != null || id != 'undefined') //是修改操作
            {
                this.handlQuery(id)
            }
        }
    })



</script>

